<script setup>
	import PrivacyPopup from '@/components/privacy-popup/privacy-popup.vue'
	import Header from '@/components/Header.vue'
	import CuiUserProfileDialog from '@/components/cui-userprofiledialog/cui-userprofiledialog.vue'
	import { onLoad } from '@dcloudio/uni-app'
	import { GlobalStore } from '@/stores/global.js'
	import { userLoginApi, getUserInfoApi } from '@/api/user.js'
	import { showToast } from '@/utils/toast'
	import { computed, ref } from 'vue'

	const userProfileDialog = ref()
	const privacyComponent = ref()
	const globalStore = GlobalStore()
	const isNickName = computed(() => globalStore.nickName && globalStore.nickName !== '')

	onLoad(() => {
		uni.login({
			success: async (res) => {
				const accountInfo = uni.getAccountInfoSync()
				const appid = accountInfo.miniProgram.appId
				globalStore.setSocialId(appid)
				if (res.errMsg == "login:ok") {
					uni.showLoading({
						mask: true
					})
					try {
						const { code, msg, data } = await userLoginApi({ code: res.code, appid })
						if (code !== 200) return showToast(msg)
						const { times, nickName } = data
						if (!times || times === '') return showToast('运行时间不能为空')
						globalStore.setData(data)
					} catch (e) {} finally {
						uni.hideLoading()
					}
				} else {
					showToast('系统异常，请联系管理员!')
				}
			}
		})
	})

	async function goToRegister() {
		const { nickName } = globalStore
		// 不存在nickname需要用户获取
		if (!nickName || nickName === '') {
			userProfileDialog.value.show({
				desc: "个人资料", // 说明
				avatarUrl: {
					requried: false, // 是否必填
					disable: true, // 是否隐藏
				},
				nickName: {
					requried: true, // 是否必填
					disable: false, // 是否隐藏
				}
			}).then(res => {
				globalStore.setNickName(res.nickName)
				uni.navigateTo({
					url: `/pages/useBle/index`
				})
			}, err => {})
		} else {
			uni.navigateTo({
				url: `/pages/useBle/index`
			})
		}
	}

	function goToInstruction() {
		// 这里添加跳转到使用说明页面的逻辑
		uni.navigateTo({
			url: `/pages/useDirections/index`
		})
	}

	function goToNews() {
		// 这里添加跳转到护眼资讯页面的逻辑
		uni.navigateTo({
			url: '/pages/eyecareCounseling/index'
		})
	}
</script>

<template>
	<CuiUserProfileDialog ref="userProfileDialog" paddingBottom="92rpx" />
	<privacy-popup ref="privacyComponent"></privacy-popup>
	<view class="container">
		<Header style="width: 100%;" />
		<image src="/static/images/bg.png" class="bg"></image>
		<view class="content">
			<view class="button" @click="goToRegister">
				<image mode="widthFix" :src="isNickName ? '/static/images/use-ble.png' : '/static/images/user-register.png'" class="btn-image"></image>
			</view>
			<view class="button" @click="goToInstruction">
				<image mode="widthFix" src="/static/images/use-directions.png" class="btn-image"></image>
			</view>
			<view class="button" @click="goToNews">
				<image mode="widthFix" src="/static/images/news.png" class="btn-image"></image>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	image {
		will-change: transform
	}

	.container {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.bg {
		width: 100%;
		height: 100%;
		position: fixed;
		background-size: 100% 100%;
		z-index: -10;
		/* 置于底层 */
	}

	.content {
		width: 100%;
		margin-top: 40rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
	}

	.button {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin-bottom: 50rpx;

		.btn-image {
			width: 670rpx;
		}
	}
</style>